<template>
  <div class="wrapper_pppg" id="pppw">
    <div class="sub_title lr_nav_bot_bd">
      <div style="height: var(--lr_status_height)"></div>
      <div class="tit_txt">
        <div class="ic icl">
          <i style="font-size: 18px" class="iconfont lricon-fanhui2"></i>
        </div>
        <div>(六壬起个课APP-排盘)</div>
        <div @click.stop="settings.show = true" class="ic icr">
          <i style="font-size: 18px" class="iconfont lricon-gengduo1"></i>
        </div>
      </div>
    </div>
    <div class="paipan_fangge">
      <div class="qkdtopt">
        <div class="left">
          <div class="ganzhi_item">
            <div class="txt" :class="getGzClass(qkdtopt.ganzhiDatetime.year[0], true)">
              {{ qkdtopt.ganzhiDatetime.year[0] }}
            </div>
            <div class="txt" :class="getGzClass(qkdtopt.ganzhiDatetime.year[1], true)">
              {{ qkdtopt.ganzhiDatetime.year[1] }}
            </div>
            <div class="txt">年</div>
          </div>
          <div class="ganzhi_item">
            <div class="txt" :class="getGzClass(qkdtopt.ganzhiDatetime.month[0], true)">
              {{ qkdtopt.ganzhiDatetime.month[0] }}
            </div>
            <div class="txt" :class="getGzClass(qkdtopt.ganzhiDatetime.month[1], true)">
              {{ qkdtopt.ganzhiDatetime.month[1] }}
            </div>
            <div class="txt">月</div>
          </div>
          <div class="ganzhi_item">
            <div class="txt" :class="getGzClass(qkdtopt.ganzhiDatetime.day[0], true)">
              {{ qkdtopt.ganzhiDatetime.day[0] }}
            </div>
            <div class="txt" :class="getGzClass(qkdtopt.ganzhiDatetime.day[1], true)">
              {{ qkdtopt.ganzhiDatetime.day[1] }}
            </div>
            <div class="txt">日</div>
          </div>
          <div class="ganzhi_item">
            <div class="txt" :class="getGzClass(qkdtopt.ganzhiDatetime.hour[0], true)">
              {{ qkdtopt.ganzhiDatetime.hour[0] }}
            </div>
            <div class="txt" :class="getGzClass(qkdtopt.ganzhiDatetime.hour[1], true)">
              {{ qkdtopt.ganzhiDatetime.hour[1] }}
            </div>
            <div class="txt">时</div>
          </div>
        </div>
        <div class="right">
          <div class="top">
            {{ qkdtopt.gongliDatetime }}<br />
            {{ qkdtopt.nongliDatetime }}({{ qkdtopt.zhouyeGui == 'zhou' ? '昼贵' : '夜贵' }}
            {{ qkdtopt.jieQi }}，{{ qkdtopt.hourType == 'zs' ? '正时' : '活时' }}，{{ qkdtopt.yueJiang.value }}将)
            <!-- {{qkdtopt.nongliDatetime }} -->
          </div>
          <div class="bot">
            <div>
              本命: <span style="color: black">{{ titNm.bm }}</span> 行年:
              <span style="color: black">{{ titNm.xn }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="paipan_wrapper">
        <div class="paipan-tiandi-top">
          <div @click="
            displayGongDetail(
              allShenSha[tianPan[5].name],
              tianPan[5].name,
              dipan[5].name,
              tianPan[5].guiShen.jianCheng
            )
            " :style="getLuokongbg(tianPan[5].luoKong)" class="paipan-tiandi-item">
            <div class="top">
              <div class="top_content">
                <div v-for="(item, index) in getShenShaL(tianPan[5].name)" class="top_item">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="bot">
              <div class="left">
                <div v-show="settings.showJiangzhangsheng">
                  {{ getZhangSheng(tianPan[5].name, dipan[5].name) }}
                </div>

                <div v-show="settings.showShenjutian">
                  {{
                    shenZhiName(tianPan[5].config.guiShen.jianCheng, tianPan[5].name).name
                  }}
                </div>
                <div v-show="settings.showZhizhangsheng">
                  {{ getZhangSheng(siKe.disanke[0].name, tianPan[5].name) }}
                </div>
                <div v-show="settings.showShenjudi">
                  {{
                    shenZhiName(tianPan[5].config.guiShen.jianCheng, dipan[5].name).name
                  }}
                </div>
                <div v-show="settings.showRizhangsheng">
                  {{ getZhangSheng(siKe.diyike[0].name, tianPan[5].name) }}
                </div>
              </div>
              <div class="right">
                <div class="right_top">
                  <div :style="[getGzcsty(tianPan[5].guiShen.value[1])]" class="item-shen">
                    {{ tianPan[5].config.guiShen.jianCheng }}
                  </div>
                  <div v-show="zhangSheng.show" class="item-zs">
                    {{ getZhangSheng(zhangSheng.slcGz, dipan[5].name) }}
                  </div>
                </div>
                <div class="right_bot">
                  <div :style="[
                    getGzcsty(tianPan[5].name),
                    getKongwangbg(tianPan[5].kongWang),
                  ]" @click.stop="slcZhangsheng(tianPan[5].name)" class="item-dizhi">
                    {{ tianPan[5].name }}
                  </div>
                  <div :style="getGzcsty(tianPan[5].dunGan)" class="item-dungan">
                    {{ tianPan[5].config.dunGan }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div @click="
            displayGongDetail(
              allShenSha[tianPan[6].name],
              tianPan[6].name,
              dipan[6].name,
              tianPan[6].guiShen.jianCheng
            )
            " :style="getLuokongbg(tianPan[6].luoKong)" class="paipan-tiandi-item">
            <div class="top">
              <div class="top_content">
                <div v-for="(item, index) in getShenShaL(tianPan[6].name)" class="top_item">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="bot">
              <div class="left">
                <div v-show="settings.showJiangzhangsheng">
                  {{ getZhangSheng(tianPan[6].name, dipan[6].name) }}
                </div>

                <div v-show="settings.showShenjutian">
                  {{
                    shenZhiName(tianPan[6].config.guiShen.jianCheng, tianPan[6].name).name
                  }}
                </div>
                <div v-show="settings.showZhizhangsheng">
                  {{ getZhangSheng(siKe.disanke[0].name, tianPan[6].name) }}
                </div>
                <div v-show="settings.showShenjudi">
                  {{
                    shenZhiName(tianPan[6].config.guiShen.jianCheng, dipan[6].name).name
                  }}
                </div>
                <div v-show="settings.showRizhangsheng">
                  {{ getZhangSheng(siKe.diyike[0].name, tianPan[6].name) }}
                </div>
              </div>
              <div class="right">
                <div class="right_top">
                  <div :style="[getGzcsty(tianPan[6].guiShen.value[1])]" class="item-shen">
                    {{ tianPan[6].config.guiShen.jianCheng }}
                  </div>
                  <div v-show="zhangSheng.show" class="item-zs">
                    {{ getZhangSheng(zhangSheng.slcGz, dipan[6].name) }}
                  </div>
                </div>
                <div class="right_bot">
                  <div :style="[
                    getGzcsty(tianPan[6].name),
                    getKongwangbg(tianPan[6].kongWang),
                  ]" @click.stop="slcZhangsheng(tianPan[6].name)" class="item-dizhi">
                    {{ tianPan[6].name }}
                  </div>
                  <div :style="getGzcsty(tianPan[6].dunGan)" class="item-dungan">
                    {{ tianPan[6].config.dunGan }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div @click="
            displayGongDetail(
              allShenSha[tianPan[7].name],
              tianPan[7].name,
              dipan[7].name,
              tianPan[7].guiShen.jianCheng
            )
            " :style="getLuokongbg(tianPan[7].luoKong)" class="paipan-tiandi-item">
            <div class="top">
              <div class="top_content">
                <div v-for="(item, index) in getShenShaL(tianPan[7].name)" class="top_item">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="bot">
              <div class="left">
                <div v-show="settings.showJiangzhangsheng">
                  {{ getZhangSheng(tianPan[7].name, dipan[7].name) }}
                </div>

                <div v-show="settings.showShenjutian">
                  {{
                    shenZhiName(tianPan[7].config.guiShen.jianCheng, tianPan[7].name).name
                  }}
                </div>
                <div v-show="settings.showZhizhangsheng">
                  {{ getZhangSheng(siKe.disanke[0].name, tianPan[7].name) }}
                </div>
                <div v-show="settings.showShenjudi">
                  {{
                    shenZhiName(tianPan[7].config.guiShen.jianCheng, dipan[7].name).name
                  }}
                </div>
                <div v-show="settings.showRizhangsheng">
                  {{ getZhangSheng(siKe.diyike[0].name, tianPan[7].name) }}
                </div>
              </div>
              <div class="right">
                <div class="right_top">
                  <div :style="[getGzcsty(tianPan[7].guiShen.value[1])]" class="item-shen">
                    {{ tianPan[7].config.guiShen.jianCheng }}
                  </div>
                  <div v-show="zhangSheng.show" class="item-zs">
                    {{ getZhangSheng(zhangSheng.slcGz, dipan[7].name) }}
                  </div>
                </div>
                <div class="right_bot">
                  <div :style="[
                    getGzcsty(tianPan[7].name),
                    getKongwangbg(tianPan[7].kongWang),
                  ]" @click.stop="slcZhangsheng(tianPan[7].name)" class="item-dizhi">
                    {{ tianPan[7].name }}
                  </div>
                  <div :style="getGzcsty(tianPan[7].dunGan)" class="item-dungan">
                    {{ tianPan[7].config.dunGan }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div @click="
            displayGongDetail(
              allShenSha[tianPan[8].name],
              tianPan[8].name,
              dipan[8].name,
              tianPan[8].guiShen.jianCheng
            )
            " :style="getLuokongbg(tianPan[8].luoKong)" class="paipan-tiandi-item">
            <div class="top">
              <div class="top_content">
                <div v-for="(item, index) in getShenShaL(tianPan[8].name)" class="top_item">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="bot">
              <div class="left">
                <div v-show="settings.showJiangzhangsheng">
                  {{ getZhangSheng(tianPan[8].name, dipan[8].name) }}
                </div>

                <div v-show="settings.showShenjutian">
                  {{
                    shenZhiName(tianPan[8].config.guiShen.jianCheng, tianPan[8].name).name
                  }}
                </div>
                <div v-show="settings.showZhizhangsheng">
                  {{ getZhangSheng(siKe.disanke[0].name, tianPan[8].name) }}
                </div>
                <div v-show="settings.showShenjudi">
                  {{
                    shenZhiName(tianPan[8].config.guiShen.jianCheng, dipan[8].name).name
                  }}
                </div>
                <div v-show="settings.showRizhangsheng">
                  {{ getZhangSheng(siKe.diyike[0].name, tianPan[8].name) }}
                </div>
              </div>
              <div class="right">
                <div class="right_top">
                  <div :style="[getGzcsty(tianPan[8].guiShen.value[1])]" class="item-shen">
                    {{ tianPan[8].config.guiShen.jianCheng }}
                  </div>
                  <div v-show="zhangSheng.show" class="item-zs">
                    {{ getZhangSheng(zhangSheng.slcGz, dipan[8].name) }}
                  </div>
                </div>
                <div class="right_bot">
                  <div :style="[
                    getGzcsty(tianPan[8].name),
                    getKongwangbg(tianPan[8].kongWang),
                  ]" @click.stop="slcZhangsheng(tianPan[8].name)" class="item-dizhi">
                    {{ tianPan[8].name }}
                  </div>
                  <div :style="getGzcsty(tianPan[8].dunGan)" class="item-dungan">
                    {{ tianPan[8].config.dunGan }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="paipan-tiandi-mid">
          <div class="mid-left">
            <div @click="
              displayGongDetail(
                allShenSha[tianPan[4].name],
                tianPan[4].name,
                dipan[4].name,
                tianPan[4].guiShen.jianCheng
              )
              " :style="getLuokongbg(tianPan[4].luoKong)" class="paipan-tiandi-item">
              <div class="top">
                <div class="top_content">
                  <div v-for="(item, index) in getShenShaL(tianPan[4].name)" class="top_item">
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="bot">
                <div class="left">
                  <div v-show="settings.showJiangzhangsheng">
                    {{ getZhangSheng(tianPan[4].name, dipan[4].name) }}
                  </div>

                  <div v-show="settings.showShenjutian">
                    {{
                      shenZhiName(tianPan[4].config.guiShen.jianCheng, tianPan[4].name)
                        .name
                    }}
                  </div>
                  <div v-show="settings.showZhizhangsheng">
                    {{ getZhangSheng(siKe.disanke[0].name, tianPan[4].name) }}
                  </div>
                  <div v-show="settings.showShenjudi">
                    {{
                      shenZhiName(tianPan[4].config.guiShen.jianCheng, dipan[4].name).name
                    }}
                  </div>
                  <div v-show="settings.showRizhangsheng">
                    {{ getZhangSheng(siKe.diyike[0].name, tianPan[4].name) }}
                  </div>
                </div>
                <div class="right">
                  <div class="right_top">
                    <div :style="[getGzcsty(tianPan[4].guiShen.value[1])]" class="item-shen">
                      {{ tianPan[4].config.guiShen.jianCheng }}
                    </div>
                    <div v-show="zhangSheng.show" class="item-zs">
                      {{ getZhangSheng(zhangSheng.slcGz, dipan[4].name) }}
                    </div>
                  </div>
                  <div class="right_bot">
                    <div :style="[
                      getGzcsty(tianPan[4].name),
                      getKongwangbg(tianPan[4].kongWang),
                    ]" @click.stop="slcZhangsheng(tianPan[4].name)" class="item-dizhi">
                      {{ tianPan[4].name }}
                    </div>
                    <div :style="getGzcsty(tianPan[4].dunGan)" class="item-dungan">
                      {{ tianPan[4].config.dunGan }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div @click="
              displayGongDetail(
                allShenSha[tianPan[3].name],
                tianPan[3].name,
                dipan[3].name,
                tianPan[3].guiShen.jianCheng
              )
              " :style="getLuokongbg(tianPan[3].luoKong)" class="paipan-tiandi-item">
              <div class="top">
                <div class="top_content">
                  <div v-for="(item, index) in getShenShaL(tianPan[3].name)" class="top_item">
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="bot">
                <div class="left">
                  <div v-show="settings.showJiangzhangsheng">
                    {{ getZhangSheng(tianPan[3].name, dipan[3].name) }}
                  </div>

                  <div v-show="settings.showShenjutian">
                    {{
                      shenZhiName(tianPan[3].config.guiShen.jianCheng, tianPan[3].name)
                        .name
                    }}
                  </div>
                  <div v-show="settings.showZhizhangsheng">
                    {{ getZhangSheng(siKe.disanke[0].name, tianPan[3].name) }}
                  </div>
                  <div v-show="settings.showShenjudi">
                    {{
                      shenZhiName(tianPan[3].config.guiShen.jianCheng, dipan[3].name).name
                    }}
                  </div>
                  <div v-show="settings.showRizhangsheng">
                    {{ getZhangSheng(siKe.diyike[0].name, tianPan[3].name) }}
                  </div>
                </div>
                <div class="right">
                  <div class="right_top">
                    <div :style="[getGzcsty(tianPan[3].guiShen.value[1])]" class="item-shen">
                      {{ tianPan[3].config.guiShen.jianCheng }}
                    </div>
                    <div v-show="zhangSheng.show" class="item-zs">
                      {{ getZhangSheng(zhangSheng.slcGz, dipan[3].name) }}
                    </div>
                  </div>
                  <div class="right_bot">
                    <div :style="[
                      getGzcsty(tianPan[3].name),
                      getKongwangbg(tianPan[3].kongWang),
                    ]" @click.stop="slcZhangsheng(tianPan[3].name)" class="item-dizhi">
                      {{ tianPan[3].name }}
                    </div>
                    <div :style="getGzcsty(tianPan[3].dunGan)" class="item-dungan">
                      {{ tianPan[3].config.dunGan }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mid-mid">
            <!-- 三川布局 -->
            <div class="paipan-sanchuan">
              <div class="paipan-sanchuan-item">
                <div class="item-liuqin">
                  {{ sanChuan[0].config.liuQin[0] }}
                </div>
                <div class="item-dungan" :style="getGzcsty(sanChuan[0].config.dunGan)">
                  {{ sanChuan[0].config.dunGan }}
                </div>
                <div class="item-dizhi" :style="getGzcsty(sanChuan[0].name)">
                  {{ sanChuan[0].name }}
                </div>
                <div class="item-shen" :style="getGzcsty(sanChuan[0].config.guiShen.value[0])">
                  {{ sanChuan[0].config.guiShen.jianCheng }}
                </div>
                <div class="item-gc">初</div>
              </div>
              <div class="paipan-sanchuan-item">
                <div class="item-liuqin">
                  {{ sanChuan[1].config.liuQin[0] }}
                </div>
                <div class="item-dungan" :style="getGzcsty(sanChuan[1].config.dunGan)">
                  {{ sanChuan[1].config.dunGan }}
                </div>
                <div class="item-dizhi" :style="getGzcsty(sanChuan[1].name)">
                  {{ sanChuan[1].name }}
                </div>
                <div class="item-shen" :style="getGzcsty(sanChuan[1].config.guiShen.value[0])">
                  {{ sanChuan[1].config.guiShen.jianCheng }}
                </div>
                <div class="item-gc">中</div>
              </div>
              <div class="paipan-sanchuan-item">
                <div class="item-liuqin">
                  {{ sanChuan[2].config.liuQin[0] }}
                </div>
                <div class="item-dungan" :style="getGzcsty(sanChuan[2].config.dunGan)">
                  {{ sanChuan[2].config.dunGan }}
                </div>
                <div class="item-dizhi" :style="getGzcsty(sanChuan[2].name)">
                  {{ sanChuan[2].name }}
                </div>
                <div class="item-shen" :style="getGzcsty(sanChuan[2].config.guiShen.value[0])">
                  {{ sanChuan[2].config.guiShen.jianCheng }}
                </div>
                <div class="item-gc">末</div>
              </div>
            </div>
            <div class="paipan-sike">
              <div class="paipan-sike-item">
                <div class="item-shen" :style="getGzcsty(siKe.disike[1].config.guiShen.value[0])">
                  {{ siKe.disike[1].config.guiShen.jianCheng }}
                </div>
                <div class="item-dizhi" :style="getGzcsty(this.siKe.disike[1].name, isWuXingC)">
                  {{ siKe.disike[1].name }}
                </div>
                <div class="item-dizhi" :style="getGzcsty(this.siKe.disike[0].name)">
                  {{ siKe.disike[0].name }}
                </div>
              </div>
              <div class="paipan-sike-item">
                <div class="item-shen" :style="getGzcsty(siKe.disanke[1].config.guiShen.value[0])">
                  {{ siKe.disanke[1].config.guiShen.jianCheng }}
                </div>
                <div class="item-dizhi" :style="getGzcsty(this.siKe.disanke[1].name)">
                  {{ siKe.disanke[1].name }}
                </div>
                <div class="item-dizhi" :style="getGzcsty(this.siKe.disanke[0].name)">
                  {{ siKe.disanke[0].name }}
                </div>
              </div>
              <div class="paipan-sike-item">
                <div class="item-shen" :style="getGzcsty(siKe.dierke[1].config.guiShen.value[0])">
                  {{ siKe.dierke[1].config.guiShen.jianCheng }}
                </div>
                <div class="item-dizhi" :style="getGzcsty(this.siKe.dierke[1].name)">
                  {{ siKe.dierke[1].name }}
                </div>
                <div class="item-dizhi" :style="getGzcsty(this.siKe.dierke[0].name)">
                  {{ siKe.dierke[0].name }}
                </div>
              </div>
              <div class="paipan-sike-item">
                <div class="item-shen" :style="getGzcsty(siKe.diyike[1].config.guiShen.value[0])">
                  {{ siKe.diyike[1].config.guiShen.jianCheng }}
                </div>
                <div class="item-dizhi" :style="getGzcsty(this.siKe.diyike[1].name)">
                  {{ siKe.diyike[1].name }}
                </div>
                <div class="item-dizhi" :style="getGzcsty(this.siKe.diyike[0].config.riYuan)">
                  {{ siKe.diyike[0].config.riYuan }}
                </div>
              </div>
            </div>
          </div>
          <div class="mid-right">
            <div @click="
              displayGongDetail(
                allShenSha[tianPan[9].name],
                tianPan[9].name,
                dipan[9].name,
                tianPan[9].guiShen.jianCheng
              )
              " :style="getLuokongbg(tianPan[9].luoKong)" class="paipan-tiandi-item">
              <div class="top">
                <div class="top_content">
                  <div v-for="(item, index) in getShenShaL(tianPan[9].name)" class="top_item">
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="bot">
                <div class="left">
                  <div v-show="settings.showJiangzhangsheng">
                    {{ getZhangSheng(tianPan[9].name, dipan[9].name) }}
                  </div>

                  <div v-show="settings.showShenjutian">
                    {{
                      shenZhiName(tianPan[9].config.guiShen.jianCheng, tianPan[9].name)
                        .name
                    }}
                  </div>
                  <div v-show="settings.showZhizhangsheng">
                    {{ getZhangSheng(siKe.disanke[0].name, tianPan[9].name) }}
                  </div>
                  <div v-show="settings.showShenjudi">
                    {{
                      shenZhiName(tianPan[9].config.guiShen.jianCheng, dipan[9].name).name
                    }}
                  </div>
                  <div v-show="settings.showRizhangsheng">
                    {{ getZhangSheng(siKe.diyike[0].name, tianPan[9].name) }}
                  </div>
                </div>
                <div class="right">
                  <div class="right_top">
                    <div :style="[getGzcsty(tianPan[9].guiShen.value[1])]" class="item-shen">
                      {{ tianPan[9].config.guiShen.jianCheng }}
                    </div>
                    <div v-show="zhangSheng.show" class="item-zs">
                      {{ getZhangSheng(zhangSheng.slcGz, dipan[9].name) }}
                    </div>
                  </div>
                  <div class="right_bot">
                    <div :style="[
                      getGzcsty(tianPan[9].name),
                      getKongwangbg(tianPan[9].kongWang),
                    ]" @click.stop="slcZhangsheng(tianPan[9].name)" class="item-dizhi">
                      {{ tianPan[9].name }}
                    </div>
                    <div :style="getGzcsty(tianPan[9].dunGan)" class="item-dungan">
                      {{ tianPan[9].config.dunGan }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div @click="
              displayGongDetail(
                allShenSha[tianPan[10].name],
                tianPan[10].name,
                dipan[10].name,
                tianPan[10].guiShen.jianCheng
              )
              " :style="getLuokongbg(tianPan[10].luoKong)" class="paipan-tiandi-item">
              <div class="top">
                <div class="top_content">
                  <div v-for="(item, index) in getShenShaL(tianPan[10].name)" class="top_item">
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="bot">
                <div class="left">
                  <div v-show="settings.showJiangzhangsheng">
                    {{ getZhangSheng(tianPan[10].name, dipan[10].name) }}
                  </div>

                  <div v-show="settings.showShenjutian">
                    {{
                      shenZhiName(tianPan[10].config.guiShen.jianCheng, tianPan[10].name)
                        .name
                    }}
                  </div>
                  <div v-show="settings.showZhizhangsheng">
                    {{ getZhangSheng(siKe.disanke[0].name, tianPan[10].name) }}
                  </div>
                  <div v-show="settings.showShenjudi">
                    {{
                      shenZhiName(tianPan[10].config.guiShen.jianCheng, dipan[10].name)
                        .name
                    }}
                  </div>
                  <div v-show="settings.showRizhangsheng">
                    {{ getZhangSheng(siKe.diyike[0].name, tianPan[10].name) }}
                  </div>
                </div>
                <div class="right">
                  <div class="right_top">
                    <div :style="[getGzcsty(tianPan[10].guiShen.value[1])]" class="item-shen">
                      {{ tianPan[10].config.guiShen.jianCheng }}
                    </div>
                    <div v-show="zhangSheng.show" class="item-zs">
                      {{ getZhangSheng(zhangSheng.slcGz, dipan[10].name) }}
                    </div>
                  </div>
                  <div class="right_bot">
                    <div :style="[
                      getGzcsty(tianPan[10].name),
                      getKongwangbg(tianPan[10].kongWang),
                    ]" @click.stop="slcZhangsheng(tianPan[10].name)" class="item-dizhi">
                      {{ tianPan[10].name }}
                    </div>
                    <div :style="getGzcsty(tianPan[10].dunGan)" class="item-dungan">
                      {{ tianPan[10].config.dunGan }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="paipan-tiandi-bot">
          <div @click="
            displayGongDetail(
              allShenSha[tianPan[2].name],
              tianPan[2].name,
              dipan[2].name,
              tianPan[2].guiShen.jianCheng
            )
            " :style="getLuokongbg(tianPan[2].luoKong)" class="paipan-tiandi-item">
            <div class="top">
              <div class="top_content">
                <div v-for="(item, index) in getShenShaL(tianPan[2].name)" class="top_item">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="bot">
              <div class="left">
                <div v-show="settings.showJiangzhangsheng">
                  {{ getZhangSheng(tianPan[2].name, dipan[2].name) }}
                </div>

                <div v-show="settings.showShenjutian">
                  {{
                    shenZhiName(tianPan[2].config.guiShen.jianCheng, tianPan[2].name).name
                  }}
                </div>
                <div v-show="settings.showZhizhangsheng">
                  {{ getZhangSheng(siKe.disanke[0].name, tianPan[2].name) }}
                </div>
                <div v-show="settings.showShenjudi">
                  {{
                    shenZhiName(tianPan[2].config.guiShen.jianCheng, dipan[2].name).name
                  }}
                </div>
                <div v-show="settings.showRizhangsheng">
                  {{ getZhangSheng(siKe.diyike[0].name, tianPan[2].name) }}
                </div>
              </div>
              <div class="right">
                <div class="right_top">
                  <div :style="[getGzcsty(tianPan[2].guiShen.value[1])]" class="item-shen">
                    {{ tianPan[2].config.guiShen.jianCheng }}
                  </div>
                  <div v-show="zhangSheng.show" class="item-zs">
                    {{ getZhangSheng(zhangSheng.slcGz, dipan[2].name) }}
                  </div>
                </div>
                <div class="right_bot">
                  <div :style="[
                    getGzcsty(tianPan[2].name),
                    getKongwangbg(tianPan[2].kongWang),
                  ]" @click.stop="slcZhangsheng(tianPan[2].name)" class="item-dizhi">
                    {{ tianPan[2].name }}
                  </div>
                  <div :style="getGzcsty(tianPan[2].dunGan)" class="item-dungan">
                    {{ tianPan[2].config.dunGan }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div @click="
            displayGongDetail(
              allShenSha[tianPan[1].name],
              tianPan[1].name,
              dipan[1].name,
              tianPan[1].guiShen.jianCheng
            )
            " :style="getLuokongbg(tianPan[1].luoKong)" class="paipan-tiandi-item">
            <div class="top">
              <div class="top_content">
                <div v-for="(item, index) in getShenShaL(tianPan[1].name)" class="top_item">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="bot">
              <div class="left">
                <div v-show="settings.showJiangzhangsheng">
                  {{ getZhangSheng(tianPan[1].name, dipan[1].name) }}
                </div>

                <div v-show="settings.showShenjutian">
                  {{
                    shenZhiName(tianPan[1].config.guiShen.jianCheng, tianPan[1].name).name
                  }}
                </div>
                <div v-show="settings.showZhizhangsheng">
                  {{ getZhangSheng(siKe.disanke[0].name, tianPan[1].name) }}
                </div>
                <div v-show="settings.showShenjudi">
                  {{
                    shenZhiName(tianPan[1].config.guiShen.jianCheng, dipan[1].name).name
                  }}
                </div>
                <div v-show="settings.showRizhangsheng">
                  {{ getZhangSheng(siKe.diyike[0].name, tianPan[1].name) }}
                </div>
              </div>
              <div class="right">
                <div class="right_top">
                  <div :style="[getGzcsty(tianPan[1].guiShen.value[1])]" class="item-shen">
                    {{ tianPan[1].config.guiShen.jianCheng }}
                  </div>
                  <div v-show="zhangSheng.show" class="item-zs">
                    {{ getZhangSheng(zhangSheng.slcGz, dipan[1].name) }}
                  </div>
                </div>
                <div class="right_bot">
                  <div :style="[
                    getGzcsty(tianPan[1].name),
                    getKongwangbg(tianPan[1].kongWang),
                  ]" @click.stop="slcZhangsheng(tianPan[1].name)" class="item-dizhi">
                    {{ tianPan[1].name }}
                  </div>
                  <div :style="getGzcsty(tianPan[1].dunGan)" class="item-dungan">
                    {{ tianPan[1].config.dunGan }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div @click="
            displayGongDetail(
              allShenSha[tianPan[0].name],
              tianPan[0].name,
              dipan[0].name,
              tianPan[0].guiShen.jianCheng
            )
            " :style="getLuokongbg(tianPan[0].luoKong)" class="paipan-tiandi-item">
            <div class="top">
              <div class="top_content">
                <div v-for="(item, index) in getShenShaL(tianPan[0].name)" class="top_item">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="bot">
              <div class="left">
                <div v-show="settings.showJiangzhangsheng">
                  {{ getZhangSheng(tianPan[0].name, dipan[0].name) }}
                </div>

                <div v-show="settings.showShenjutian">
                  {{
                    shenZhiName(tianPan[0].config.guiShen.jianCheng, tianPan[0].name).name
                  }}
                </div>
                <div v-show="settings.showZhizhangsheng">
                  {{ getZhangSheng(siKe.disanke[0].name, tianPan[0].name) }}
                </div>
                <div v-show="settings.showShenjudi">
                  {{
                    shenZhiName(tianPan[0].config.guiShen.jianCheng, dipan[0].name).name
                  }}
                </div>
                <div v-show="settings.showRizhangsheng">
                  {{ getZhangSheng(siKe.diyike[0].name, tianPan[0].name) }}
                </div>
              </div>
              <div class="right">
                <div class="right_top">
                  <div :style="[getGzcsty(tianPan[0].guiShen.value[1])]" class="item-shen">
                    {{ tianPan[0].config.guiShen.jianCheng }}
                  </div>
                  <div v-show="zhangSheng.show" class="item-zs">
                    {{ getZhangSheng(zhangSheng.slcGz, dipan[0].name) }}
                  </div>
                </div>
                <div class="right_bot">
                  <div :style="[
                    getGzcsty(tianPan[0].name),
                    getKongwangbg(tianPan[0].kongWang),
                  ]" @click.stop="slcZhangsheng(tianPan[0].name)" class="item-dizhi">
                    {{ tianPan[0].name }}
                  </div>
                  <div :style="getGzcsty(tianPan[0].dunGan)" class="item-dungan">
                    {{ tianPan[0].config.dunGan }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div @click="
            displayGongDetail(
              allShenSha[tianPan[11].name],
              tianPan[11].name,
              dipan[11].name,
              tianPan[11].guiShen.jianCheng
            )
            " :style="getLuokongbg(tianPan[11].luoKong)" class="paipan-tiandi-item">
            <div class="top">
              <div class="top_content">
                <div v-for="(item, index) in getShenShaL(tianPan[11].name)" class="top_item">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="bot">
              <div class="left">
                <div v-show="settings.showJiangzhangsheng">
                  {{ getZhangSheng(tianPan[11].name, dipan[11].name) }}
                </div>

                <div v-show="settings.showShenjutian">
                  {{
                    shenZhiName(tianPan[11].config.guiShen.jianCheng, tianPan[11].name)
                      .name
                  }}
                </div>
                <div v-show="settings.showZhizhangsheng">
                  {{ getZhangSheng(siKe.disanke[0].name, tianPan[11].name) }}
                </div>
                <div v-show="settings.showShenjudi">
                  {{
                    shenZhiName(tianPan[11].config.guiShen.jianCheng, dipan[11].name).name
                  }}
                </div>
                <div v-show="settings.showRizhangsheng">
                  {{ getZhangSheng(siKe.diyike[0].name, tianPan[11].name) }}
                </div>
              </div>
              <div class="right">
                <div class="right_top">
                  <div :style="[getGzcsty(tianPan[11].guiShen.value[1])]" class="item-shen">
                    {{ tianPan[11].config.guiShen.jianCheng }}
                  </div>
                  <div v-show="zhangSheng.show" class="item-zs">
                    {{ getZhangSheng(zhangSheng.slcGz, dipan[11].name) }}
                  </div>
                </div>
                <div class="right_bot">
                  <div :style="[
                    getGzcsty(tianPan[11].name),
                    getKongwangbg(tianPan[11].kongWang),
                  ]" @click.stop="slcZhangsheng(tianPan[11].name)" class="item-dizhi">
                    {{ tianPan[11].name }}
                  </div>
                  <div :style="getGzcsty(tianPan[11].dunGan)" class="item-dungan">
                    {{ tianPan[11].config.dunGan }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-tabs style="font-weight: 500" sticky title-inactive-color="#2c2c2c" line-width="24rem" color="red" animated
        duration="0.300" background="rgba(79, 70, 229, 0.0)" title-active-color="black" :lazy-render="false"
        :swipeable="true" class="fuzhu_tabs" v-model:active="activeFzTab" type="line">
        <van-tab class="tab" :title-style="{ padding: 0, margin: 0 }" title="直指">
          <ZhiZhi v-model:zzKey="zzKey"></ZhiZhi>
        </van-tab>
        <van-tab class="tab" :title-style="{ padding: 0, margin: 0 }" title="集应">
          <JiYingQian :zz-key="zzKey"></JiYingQian>
        </van-tab>
        <van-tab class="tab" :title-style="{ padding: 0, margin: 0 }" title="神煞">
          <ShenSha v-model:qkdtopt="qkdtopt"></ShenSha>
        </van-tab>
        <van-tab class="tab" :title-style="{ padding: 0, margin: 0 }" title="毕法">
          <BiFa v-model:zzKey="zzKey"></BiFa>
        </van-tab>
        <van-tab class="tab" :title-style="{ padding: 0, margin: 0 }" title="年命">
          <NiangMing v-model:nmModelValue="titNm" :qkdt="qkdtopt.gongliDatetime" v-model="qkdtopt.niangMing">
          </NiangMing>
        </van-tab>
        <van-tab class="tab" :title-style="{ padding: 0, margin: 0 }" title="类占">
          <FenLeiZhan></FenLeiZhan>
        </van-tab>
        <van-tab class="tab" :title-style="{ padding: 0, margin: 0 }" title="课经">
          <KeJing v-model:zzKey="zzKey"></KeJing>
        </van-tab>
        <van-tab class="tab" :title-style="{ padding: 0, margin: 0 }" title="课例">
          <XSKL v-model:zzKey="zzKey"></XSKL>
        </van-tab>
        <van-tab class="tab" :title-style="{ padding: 0, margin: 0 }" title="存档">
          <CunDang :title="qkdtopt.cunDang.zhanShi" :comment="qkdtopt.cunDang.duanYu" :feedback="qkdtopt.cunDang.fanKui"
            :fen-zu="qkdtopt.cunDang.fenZu" :gua-zhu="qkdtopt.cunDang.guaZhu" :tag-list="qkdtopt.cunDang.tag"></CunDang>
        </van-tab>
      </van-tabs>
    </div>

    <VanOverlay :lock-scroll="false" @click="showGongDetail = false" :lazy-render="false" :show="showGongDetail">
      <div class="overlay_wrapper">
        <transition name="scale-center">
          <GongDetail @click.stop :shen-sha="gongDetail.shenSha" :di="gongDetail.di" :tian="gongDetail.tian"
            :shen="gongDetail.shen" v-show="showGongDetail"></GongDetail>
        </transition>
      </div>
    </VanOverlay>
    <VanOverlay :lock-scroll="false" @click="settings.show = false" :lazy-render="false" :show="settings.show">
      <div class="overlay_wrapper">
        <transition name="van-slide-up">
          <PpSetings v-show="settings.show" :settings="settings" @click.stop></PpSetings>
        </transition>
      </div>
    </VanOverlay>
    <ShareSheet @select="shareQQWx" v-model:show="showShare" title="立即分享给好友" :options="options"></ShareSheet>
    <div class="funNav lr_nav_top_bd">
      <div @click="qianhouHourQiKe(-1)" class="item">
        <i class="iconfont lricon-houtui list-item" :class="{ show_class: true }"></i>
        <div :class="{ show_class: true }">步退</div>
      </div>
      <div @click="qianhouHourQiKe(1)" class="item">
        <i class="iconfont lricon-qianjin list-item" :class="{ show_class: true }" @click="go(1)"></i>
        <div :class="{ show_class: true }">步进</div>
      </div>
      <div class="item">
        <i @click="shareQkopt" class="iconfont lricon-fabusekuai list-item" :class="{ show_class: true }"></i>
        <div :class="{ show_class: true }">分享</div>
      </div>
      <div class="item">
        <i style="font-size: 22rem" class="iconfont lricon-jieping list-item" :class="{ show_class: true }"
          @click="screenShot"></i>
        <div :class="{ show_class: true }">截屏</div>
      </div>

      <div class="item">
        <i style="font-size: 22rem" class="iconfont lricon-shujucundang list-item" :class="{ show_class: true }" @click="
          () => {
            if (!showCunDang) {
              showCunDang = true;
              return;
            }
            showCunDang = false;
          }
        "></i>
        <div :class="{ show_class: true }">存档</div>
      </div>
    </div>
    <van-popup v-model:show="showGroupSlc" round position="bottom">
      <van-picker :columns="groupList" title="选择存档分组" v-model="groupValue" @cancel="showGroupSlc = false" @change="
        () => {
          emitter.emit('ppGroupSlcV', groupValue);
        }
      " @confirm="
        () => {
          emitter.emit('ppGroupSlcV', groupValue);
          showGroupSlc = false;
        }
      " />
    </van-popup>
    <van-popup v-model:show="showDatepicker" round position="bottom">
      <DatePicker v-model="currentDate" title="选择出生日期" :min-date="minDate" :max-date="maxDate"
        :formatter="formatterBirthDate" @cancel="
          () => {
            showDatepicker = false;
          }
        " @confirm="
          () => {
            showDatepicker = false;
            emitter.emit('ppAddniangming', currentDate);
          }
        "></DatePicker>
    </van-popup>
    <RouterView></RouterView>
  </div>
</template>

<script>
import {
  onResume,
  onPause,
  onBackKeyDown,
  onMenuKeyDown,
  onSearchKeyDown,
  onVolumeDownKeyDown,
  onVolumeUpKeyDown,
  onKeyDown,
} from "tauri-plugin-app-events-api";
import { ColorPicker } from "vue3-colorpicker";
import {
  Stepper,
  Toast,
  Tabs,
  Tab,
  Overlay,
  Popup,
  Picker,
  DatePicker,
} from "vant";
import { showToast } from "@nutui/nutui";
import PaiPanFuZhu from "../components/PaiPanFuZhu.vue";
import VueHashCalendar from "vue3-hash-calendar";
import VueCtkDateTimePicker from "vue-ctk-date-time-picker";
import { getLiuRenShenKeOptions, dipan, initSiKe, shenZhiName } from "../api/paipan";
import { useQiKeDateStore } from "../store";
import { ShareSheet } from "vant";
import dayjs from "dayjs";
import html2canvas from "html2canvas";
import { saveLiurenke, selectYudingZhiz, updateLiurenkeById } from "../api/dbUtils";
import qikeDateOption, {
  getQiKeDateOption,
  nextAndPrevQike,
} from "../api/qikeDateOption";
import { adjustHours, getZhangSheng } from "../api/dateUtils";
import { getGzClass, getGzcsty, getKongwangbg, getLuokongbg } from "../api/styleUtils";
import CunDang from "../components/CunDang.vue";
import ZhiZhi from "../components/fuzhu/ZhiZhi.vue";
import JiYingQian from "../components/fuzhu/JiYingQian.vue";
import FenLeiZhan from "../components/fuzhu/FenLeiZhan.vue";
import BiFa from "../components/fuzhu/BiFa.vue";
import XSKL from "../components/fuzhu/XSKL.vue";
import ShenSha from "../components/fuzhu/ShenSha.vue";
import NiangMing from "../components/fuzhu/NiangMing.vue";
import PpSetings from "../components/fuzhu/PpSetings.vue";
import { getAllShenSha } from "../api/shensha";

import { writeFile, BaseDirectory } from "@tauri-apps/plugin-fs";
import {
  TFile,
  getFilesDir,
  writeFileImmediately,
} from "tauri-plugin-tinys-internal-fs-api";
import {
  classifyByEarthlyBranches,
  getShenShaObj,
  handleAllAndCommenSS,
} from "../api/getShenSha";
import emitter from "../bus/emitter";
import { getQikeGroups } from "../api/store";
import GongDetail from "../components/fuzhu/gongDetail.vue";
import { view } from "tauri-plugin-view-api";
import KeJing from "../components/fuzhu/KeJing.vue";
import {
  appDataDir,
  downloadDir,
  publicDir,
  pictureDir,
  resolve,
} from "@tauri-apps/api/path";
import { writeText } from "@tauri-apps/plugin-clipboard-manager";
import { formatterBirthDate } from "../api/paipanotion";
import { show } from "@tauri-apps/api/app";
export default {
  name: "Test",
  components: {
    VueHashCalendar,
    ShareSheet,
    PaiPanFuZhu,
    CunDang,
    VanTab: Tab,
    VanTabs: Tabs,
    ZhiZhi,
    VanOverlay: Overlay,
    JiYingQian,
    FenLeiZhan,
    ShenSha,
    BiFa,
    VanPicker: Picker,
    VanPopup: Popup,
    XSKL,
    GongDetail,
    KeJing,
    DatePicker,
    NiangMing,
    VanStepper: Stepper,
    ColorPicker,
    PpSetings,
  },
  data() {
    return {
      zhangSheng: {
        show: false,
        slcGz: "子",
      },
      currentYueJiang: null,
      tianPan: [],
      dipan: [],
      siKe: null,
      sanChuan: null,
      qkdtopt: null,
      showFuZhu: false,
      qikeDateStore: useQiKeDateStore(),
      getZhangSheng: getZhangSheng,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "QQ", icon: "qq" },
        // { name: '微博', icon: 'weibo' },
        { name: "复制", icon: "link" },
        // { name: '分享海报', icon: 'poster' },
        // { name: '二维码', icon: 'qrcode' },
      ],
      showShare: false,
      zzKey: null,
      showCunDang: false,
      getGzClass: getGzClass,
      getKongwangbg: getKongwangbg,
      getLuokongbg: getLuokongbg,
      activeFzTab: 0,
      shenShas: null,
      allShenSha: [],
      showGroupSlc: false,
      groupList: [
        { text: "全部", value: "全部" },
        { text: "QQ", value: "QQ" },
        { text: "微信", value: "微信" },
        { text: "朋友", value: "朋友" },
        { text: "家人", value: "家人" },
        { text: "默认", value: "默认" },
      ],
      groupValue: ["默认"],
      emitter: emitter,
      shenZhiName: shenZhiName,
      getGzcsty: getGzcsty,
      gongDetail: {
        shenSha: [],
        di: "子",
        tian: "子",
        shen: "贵",
      },
      showGongDetail: false,
      showDatepicker: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2200, 5, 1),
      currentDate: ["2021", "01", "01"],
      formatterBirthDate: formatterBirthDate,
      settings: {
        show: false,
        showShenjutian: false,
        showShenjudi: false,
        showZhizhangsheng: false,
        showRizhangsheng: true,
        showJiangzhangsheng: false,
      },
      titNm: {
        xn: '暂无',
        bm: '暂无'
      },
      listeners: {
        ppUpdateSs: null,
        ppShowGroupSlc: null,
        ppSave: null,
        ppOpendatepicker: null
      },
      boundListeners: {}
    };
  },
  async created() {

    await this.paipan();
    onBackKeyDown(() => {
      if (
        this.showFuZhu == true ||
        this.showShare == true ||
        this.showGongDetail == true
      ) {
        this.showFuZhu = false;
        this.showShare = false;
        this.showGongDetail = false;
        return false;
      } else {
        return true;
      }
    });
    this.listeners.ppUpdateSs = function (data) {
      this.shenShas = data; // this 正确指向组件实例
    };

    this.listeners.ppShowGroupSlc = function (data) {
      this.showGroupSlc = data;
    };

    this.listeners.ppSave = async function (data) {
      console.log(data);
      this.qkdtopt.cunDang.guaZhu = data.guaZhu;
      this.qkdtopt.cunDang.zhanShi = data.zhanShi;
      this.qkdtopt.cunDang.duanYu = data.duanYu;
      this.qkdtopt.cunDang.fanKui = data.fanKui;
      this.qkdtopt.cunDang.fenZu = data.fenZu;
      this.qkdtopt.cunDang.tag = data.tag;
      this.qkdtopt.cunDang.guaShi = data.guaShi;
      this.qkdtopt.rgz = this.qkdtopt.ganzhiDatetime.day;
      // 注意：需判断 this.siKe.diyike 存在，避免报错
      this.qkdtopt.rss = this.siKe?.diyike[1]?.name || '';

      try {
        if (this.qkdtopt.id != -1) {
          await updateLiurenkeById(this.qkdtopt)
          showToast.success('修改成功', { id: 1 });
          return;
        }
        let r = await saveLiurenke(this.qkdtopt);
        this.qkdtopt.id = r.lastInsertId
        showToast.success('保存成功', { id: 1 });
        // 建议移除 alert，与 toast 重复且体验差
        // alert('保存成功');
      } catch (err) {
        // 补充错误处理，避免保存失败无反馈
        showToast.fail('保存失败：' + err.message, { id: 1 });
        console.error('保存错误', err);
      }
    };

    this.listeners.ppOpendatepicker = function (v) {
      this.showDatepicker = v;
    };

    // 3. 绑定监听器（绑定前先移除，避免同次创建重复绑定）
    Object.entries(this.listeners).forEach(([eventName, handler]) => {
      this.boundListeners[eventName] = handler.bind(this);
      // 先清除旧的（用缓存的引用），再绑定新的
      emitter.off(eventName, this.boundListeners[eventName]);
      emitter.on(eventName, this.boundListeners[eventName]);
    });
    this.shenShas = classifyByEarthlyBranches(getShenShaObj(this.qkdtopt).常用.value);

    this.allShenSha = this.convertToObject(getShenShaObj(this.qkdtopt).全部.value);
  },
  props: {},
  methods: {
    async paipan() {
      console.log("pppppp------====");
      let qkdtopt = this.qikeDateStore.getQikeDatetimeOption;
      this.qkdtopt = { ...qkdtopt };
      console.log(qkdtopt);
      let liuRenShenKeOptions = getLiuRenShenKeOptions(this.qkdtopt);
      this.tianPan = liuRenShenKeOptions.tianDiPan;
      this.siKe = liuRenShenKeOptions.siKe;
      this.sanChuan = liuRenShenKeOptions.sanChuan;
      this.dipan = liuRenShenKeOptions.dipan;
      this.zzKey = {
        dgz: this.qkdtopt.ganzhiDatetime.day,
        gss: this.siKe.diyike[1].name,
      };
    },
    getShenShaL(dz) {
      return this.shenShas[dz];
    },
    qianhouHourQiKe(v) {
      if (this.qkdtopt.hourType == "hs") {
        alert("不支持活时");
        return;
      }
      this.qkdtopt = nextAndPrevQike(this.qkdtopt, v);
      let liuRenShenKeOptions = getLiuRenShenKeOptions(this.qkdtopt);
      this.tianPan = liuRenShenKeOptions.tianDiPan;
      this.siKe = liuRenShenKeOptions.siKe;
      this.sanChuan = liuRenShenKeOptions.sanChuan;

      this.zzKey = {
        dgz: this.qkdtopt.ganzhiDatetime.day,
        gss: this.siKe.diyike[1].name,
      };
    },
    displayGongDetail(ss, t, d, shen) {
      this.showGongDetail = true;
      this.gongDetail = {
        shenSha: ss,
        tian: t,
        di: d,
        shen: shen,
      };
    },
    convertToObject(data) {
      // 初始化空对象
      const result = {};

      // 遍历数组，构建对象
      data.forEach((item) => {
        const { dz, ss = "" } = item;

        // 拆分ss字符串为数组（处理逻辑与之前一致）
        const ssArr = ss
          .split("、")
          .map((str) => str.trim())
          .filter((str) => str !== "");

        // 以dz为键，ssArr为值存入对象
        result[dz] = ssArr;
      });

      return result;
    },
    async screenShot() {
      // 查找#app元素
      const appElement = document.getElementById("pppw");
      if (!appElement) {
        alert("未找到#app元素，请检查页面结构");
        return;
      }

      // 显示原生加载提示


      const canvas = await html2canvas(appElement, {
        useCORS: true,
        scale: window.devicePixelRatio,
        logging: false,
        scrollX: 0,
        scrollY: -window.scrollY,
      });
      const timestamp = new Date().getTime();
      const fileName = `app-screenshot-${timestamp}.png`;

      // 将canvas转换为PNG格式的Blob，再转为Uint8Array
      canvas.toBlob(async (blob) => {
        if (!blob) {
          console.error("无法生成PNG格式的Blob");
          return;
        }

        try {
          // 确认生成的是PNG格式
          const pngFile = new File([blob], fileName, { type: "image/png" });
          console.log("带文件名的PNG文件:", pngFile);
          console.log("文件名:", pngFile.name); // 确认文件名已关联

          // 3. 将带文件名的PNG转换为Uint8Array
          const arrayBuffer = await pngFile.arrayBuffer();
          const pngUint8Array = new Uint8Array(arrayBuffer);

          // 结果：同时拥有Uint8Array和对应的文件名
          const result = {
            data: pngUint8Array,
            fileName: pngFile.name,
            type: pngFile.type,
          };

          // 示例：在这里可以将Uint8Array用于上传或其他处理
          // uploadUint8Array(pngUint8Array);
          //  const filePath = 'quick_write_file.txt';
          //  await writeFileImmediately(filePath, 'Content written immediately!');
          // console.log('File written immediately.');
          // const filesDir = await getFilesDir();
          // alert(filesDir)
          let p = await pictureDir();

          await writeFile(p + "//" + result.fileName, result.data);
          const path = await resolve(p, result.fileName);
          alert(p);

          // 获取各个安全区域变量值

          alert(safeTop);
          await view(path);
          alert("分享");
        } catch (error) {
          console.error("转换过程出错:", error);
          alert("处理PNG截图时发生错误");
          alert(error);
          console.error("Failed to write file immediately:", error);
        }
      }, "image/png"); // 明确指定MIME类型为image/png
    },
    shareQQWx(o, i) {
      //   if (i == 0) {
      //   this.$router.push('/paipan/weixin')
      //   } else {
      //   this.$router.push('paipan/qq')
      //  }
    },
    async shareQkopt() {
      alert("复制成功");
      await writeText("hhhhhhh");
    },
    slcZhangsheng(v) {
      if (this.zhangSheng.show == false) {
        this.zhangSheng.slcGz = v;
        this.zhangSheng.show = true;
      } else {
        this.zhangSheng.show = false;
      }
    },
  },
  beforeUnmount() {
    Object.entries(this.boundListeners).forEach(([eventName, boundHandler]) => {
    emitter.off(eventName, boundHandler); 
  });
  // 可选：清空缓存，释放内存
  this.boundListeners = {};
  this.listeners = {};
  }
};
</script>

<style lang="scss" scoped>
$ppbdc: #efefef;
$lcbgc: var(--lr_lcbgc);
$pph: calc(100vh - var(--lr_nbh) - 32rem - var(--safe-top));
$th: calc(var(--safe-top) + 31rem);
$bh: calc(var(--lr_nbh) + 1rem);

.wrapper_pppg {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: var(--lr_lbgc);
  position: fixed;

  .overlay_wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .tag_w {
      width: 80vw;
      display: flex;
      flex-direction: column;
    }
  }

  .sub_title {
    width: 100vw;
    background-color: var(--nav_bg_color);
    display: flex;
    align-items: center;
    flex-direction: column;

    .tit_txt {
      .ic {
        i {
          font-size: 20px;

          &:active {
            transition: transform 0.3s ease;
            transform: scale(1.2);
          }
        }

        text-align: center;
        width: 20vw;
        // background-color: #531c1c;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .icl {
        // background-color: #b34747;
        text-align: left;
        font-size: 18px;
        font-weight: 400;
        justify-content: flex-start;
      }

      .icr {
        // background-color: #34cc23;
        text-align: right;
        justify-content: flex-end;
      }

      width: 94vw;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .paipan_fangge {
    height: calc(100vh - 85rem - 40px);
    // margin-top: calc(var(--safe-top) + 31rem);
    display: flex;
    flex-direction: column;
    width: 100vw;
    align-items: center;
    overflow: scroll;

    .qkdtopt {
      background-color: $lcbgc;
      border-radius: 4rem;
      width: 94vw;
      padding: 1vw;
      display: flex;
      align-items: center;
      height: 70rem;

      .left {
        // margin-top: 5rem;
        display: flex;
        width: fit-content;
        height: fit-content;
        display: flex;
        width: 110rem;
        justify-content: space-between;

        .txt {
          // background-color: #d41c1c;
          height: 23rem;
          line-height: 23rem;
          text-align: center;
          font-size: 16rem;
          font-weight: 500;
          // border: 1rem solid rebeccapurple;
        }
      }

      .right {
        // margin-right: 2rem;
        margin-left: 10rem;
        font-size: 15rem;
        line-height: 18rem;
        font-weight: 400;
        width: calc(94vw - 117rem);
        color: var(--cart_bg_color);
        // background-color: #5c2d2d;
        width: fit-content;
        display: flex;

        justify-content: flex-start;
        flex-direction: column;
        align-items: center;

        .top {
          width: calc(94vw - 117rem);
          text-align: center;
        }

        .bot {
          width: calc(94vw - 117rem);
          text-align: center;
          display: flex;
          flex-direction: column;
        }
      }
    }

    .paipan_wrapper {
      border-radius: 8rem;
      margin-top: 10rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: start;
      // font-weight: bold;
      width: fit-content;
      height: fit-content;
      // background-color: $lcbgc;
      // border: 1rem solid $ppbdc;
      overflow: hidden;
      // background: #a18181;

      .paipan-tiandi-item {
        width: 23.5vw;
        height: 23.5vw;
        margin: 1rem !important;
        background-color: #fff;
        display: flex;
        flex-direction: column;

        .item-shen {
          font-size: var(--lr_pp_shen_size);
          color: var(--cart_bg_color);
          margin-bottom: 3rem;
        }

        .item-dungan {
          font-size: var(--lr_pp_dungan_size);
          color: #4caf50;
          margin-bottom: 2rem;
        }

        .item-dizhi {
          font-size: var(--lr_pp_jiang_size);
          color: #000000;
          margin-bottom: 2rem;
        }

        .item-zs {
          font-size: 12rem;

          background-color: #7b1fa2;
          color: white;
          margin-bottom: 2rem;
        }

        .top {
          height: 50%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .top_content {
            height: 100%;
            width: calc(100% - 4rem);
            display: flex;
            overflow: scroll;

            .top_item {
              margin-top: 2rem;
              writing-mode: vertical-rl;
              height: 90%;
              width: 12rem;
              margin-left: 2rem;
              margin-right: 2rem;
              height: fit-content;
              font-size: var(--lr_pp_shensha_size);
              color: #677381;
            }
          }
        }

        .bot {
          height: 50%;
          width: 100%;
          // background-color: #c50808;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .right {
            div {
              margin-right: 5rem;
            }

            width: 50%;
            height: 100%;

            // background-color: #7f5e5e;
            .right_top {
              width: 100%;
              height: 50%;
              display: flex;
              flex-direction: row-reverse;
              align-items: flex-end;
              // background-color: #918686;
            }

            .right_bot {
              // background-color: #1e0707;
              width: 100%;
              height: 50%;
              display: flex;
              flex-direction: row-reverse;
              align-items: flex-end;
            }
          }

          .left {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: end;
            width: 50%;
            height: calc(100% - 2rem);
            margin-bottom: 2rem;
            overflow: auto;

            //  background-color: #642d2d;
            div {
              font-size: var(--lr_pp_kexuan_size);
              color: #677381;
              text-align: center;
              width: fit-content;
              margin-left: 3rem;
            }
          }
        }
      }

      .paipan-tiandi-top {
        width: fit-content;
        display: flex;
        // background-color: #650707;
      }

      .paipan-tiandi-mid {
        width: fit-content;
        height: fit-content;
        display: flex;
        align-items: center;

        .mid-mid {
          margin: 1rem;
          padding: 1rem;
          // border: 1rem solid $ppbdc;
          width: 47vw;
          height: 47vw;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          background-color: #fff;

          .item-shen {
            font-size: 18rem;
            color: var(--cart_bg_color);
          }

          .item-dungan {
            font-size: 12rem;
            color: #4caf50;
          }

          .item-dizhi {
            font-size: 18rem;
            color: #000000;
          }

          // background-color: #0b07fc;
          .paipan-sanchuan {
            width: fit-content;
            height: fit-content;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            // font-weight: 400;
            text-align: center;
            font-size: 18rem;

            .paipan-sanchuan-item {
              display: flex;

              width: fit-content;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;

              div {
                font-size: var(--lr_pp_sksc_size);
                height: 6vw;
                line-height: 6vw;
                width: 5vw;
              }

              .item-liuqin {
                color: #000000;
                // background-color: #c61717;
                // font-family: Arial, Helvetica, sans-serif;
                margin-right: 10rem;
                // width: 6vw;
              }

              .item-dungan {
                margin-right: 10rem;
              }

              .item-dizhi {
                margin-right: 10rem;
              }

              .item-gc {
                color: #000000;
                margin-left: 10rem;
              }
            }
          }

          .paipan-sike {
            margin-top: 15rem;
            width: 36vw;
            height: fit-content;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            .paipan-sike-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              height: fit-content;

              @font-face {
                font-family: "CustomKaiti";
                src: url("../assets/font/STKaitiRegular.ttf");
              }

              div {
                // font-weight: 500;
                // font-family: "CustomKaiti";
                // width: 10vw;
                height: 6vw;

                font-size: var(--lr_pp_sksc_size) !important;
                line-height: 6vw;
                text-align: center;
              }
            }
          }
        }

        .mid-left {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: fit-content;
          // height: 48vw;
        }

        .mid-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: fit-content;
          // background-color: #650707;
          width: fit-content;
          // height: 48vw;
        }
      }

      .paipan-tiandi-bot {
        .paipan-tiandi-item {
          margin: 1rem;
        }

        width: fit-content;
        display: flex;
        // background-color: #650707;
      }
    }

    .fuzhu_tabs {
      margin-top: 10rem;
      width: 100vw;
      height: 30rem;

      ::v-deep(.van-tabs__wrap) {
        // font-size: 1.9rem;
        height: 30rem;
        width: 98vw;

        // border: 2rem solid #efefef;
        // background-color: $lcbgc;
        margin-left: 1vw;
        align-items: center;
      }

      ::v-deep(.van-tab--active) {
        // font-size: 1.9rem;
        font-weight: 600;
      }

      ::v-deep(.van-tabs__nav--complete) {
        padding-right: 0;
        padding-left: 0;
      }

      .tab {
        margin-top: 10rem;
        width: 100vw;
        // border-radius: 8rem;
        // background-color: #251010;
        overflow: hidden;
        height: calc(100vh - 135rem - var(--safe-top));
        max-height: calc(100vh - 135rem - var(--safe-top));
        overflow: hidden;
        align-items: center;
        display: flex;
      }
    }
  }

  .funNav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 53rem;
    display: flex;
    color: rgba($color: #000000, $alpha: 0);
    justify-content: space-around;
    align-items: center;
    background-color: var(--nav_bg_color);
    // background-color: rgba($color: #00000000, $alpha: 0);

    .item {
      width: 16vw;
      display: flex;
      justify-content: start;
      align-items: center;

      flex-direction: column;

      .list-item {
        font-size: 24rem;
      }

      // background-color: #ff0303;
      .list-item:active {
        // background-color: #12ca93;
        font-size: 30rem;
        transition: 0.3s;
      }

      letter-spacing: 1rem;

      .show_class {
        color: var(--cart_bg_color);
      }

      i {
        color: #ffffff;
      }

      div {
        text-align: center;
        font-size: 10rem;
        color: #ffffff;
        height: 14rem;
        line-height: 14rem;
      }

      .div:active {
        // background-color: #12ca93;
        font-size: 12rem;
        transition: 0.3s;
      }
    }
  }
}
</style>
